<template>
    <div class="navShow">
        <div class="box" v-for="(obj,i) in navList" :key="obj.navId" @click="goEdit(obj.navCode)">
            <Tooltip trigger="click"
                     confirm
                     placement="right-end"
                     theme="light"
                     width="400">
                <div slot="content">
                    <div class="top" @click="goEdit(obj.navCode)">
                        <Icon type="ios-create-outline" size="20"/>
                        <span class="tip">编辑</span>
                    </div>
                    <div class="br"></div>
                    <div class="bottom" @click="goShow(obj.navUrl)">
                        <Icon type="ios-paper-plane-outline" size="20"/>
                        <span class="tip">效果</span>
                    </div>
                </div>
                <div class="wrapper">
                    <span :class="obj.navCode" class="bg-pic"></span>
                    <span class="text">{{obj.navName}}</span>
                </div>
            </Tooltip>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        components: {},
        props: {
            navList: {
                type: Array
            }
        },
        data() {
            return {}
        },
        methods: {
            goEdit: function (navCode) {
                this.$emit("nav-edit",navCode)
            },
            goShow:function (navUrl) {
                window.open(navUrl, '_blank');
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>

    /*字体样式*/
    .navShow .box {
        border-radius: 4px;
        width: 200px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        line-height: 70px;
        font-family: Arial;
        font-weight: initial;
        color: #000000;
        font-size: 20px;
        background-color: #F3F5F6;
    }

    /*编辑*/
    .navShow .box .top {
        border-radius: 4px;
        padding: 6px 4px 2px 4px;
        margin-bottom: 4px;
        color: #000;
        background-color: #CCFFE6;
    }
    /*效果*/
    .navShow .box .bottom {
        border-radius: 4px;
        padding: 2px 4px 6px 4px;
        margin-top: 4px;
        color: #000;
        background-color: #E6FFCC;
    }

    /*分割线*/
    .navShow .box .br {
        height: 1px;
        width: 80px;
        background-color: black
    }

    /*提示*/
    .navShow .box .tip {
        display: inline-block;
        height: 28px;
        width: 46px;
        text-align: center;
        font-size: 16px;
        line-height: 28px;
    }

    .navShow .box .wrapper {
        width: 200px;
        height: 70px;
    }

    .navShow .box .text {
        display: inline-block;
        font-size: 20px;
    }

    /*位置*/
    .navShow .box {
        float: left;
        margin-top: 40px;
        margin-left: 70px;
    }

    .navShow .box .bg-pic {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-size: 100% 100%;
        vertical-align: middle;
        margin-right: 8px;
    }

    .navShow .box .howUse {
        width: 40px;
        height: 40px;
        background-image: url(../../assets/nav/howUse.png);
    }

    .navShow .box .vip {
        width: 40px;
        height: 50px;
        background-image: url(../../assets/nav/vip.png);
    }

    .navShow .box .education {
        width: 45px;
        height: 45px;
        background-image: url(../../assets/nav/teacher.png);
    }

    .navShow .box .suggestion {
        background-image: url(../../assets/nav/suggestion.png);
    }

    .navShow .box .love {
        width: 40px;
        height: 40px;
        background-image: url(../../assets/nav/love.png);
    }

    .navShow .box .offer {
        width: 55px;
        height: 55px;
        margin-right: 0px;
        background-image: url(../../assets/nav/offer.png);
    }

    .navShow .box .joke {
        width: 40px;
        height: 40px;
        background-image: url(../../assets/nav/joke.png);
    }

    .navShow .box .topic {
        width: 55px;
        height: 55px;
        background-image: url(../../assets/nav/topic.png);
    }

    .navShow .box .icu {
        background-image: url(../../assets/nav/icu.png);
    }

    .navShow .box .waiting {
        width: 40px;
        height: 40px;
        background-image: url(../../assets/nav/wait.png);
    }
</style>